<template>
    <view class="nav-wrap" :style="{ marginTop: safeAreaInsetTop + 'px' }">
        <!-- 一级导航开始 -->
        <view class="top-box">
            <view v-for="(item, index) in firstNavList" :key="index" class="item" @click="goto(item.path)">
                <image
                    :src="item.icon"
                    mode="scaleToFill"
                />
                <view class="item-panel">
                    <text class="title">{{item.title}}</text>
                    <text class="desc">{{item.desc}}</text>
                </view>
            </view>
        </view>
        <!-- 一级导航开始 -->
        <view class="bottom-box">
            <view v-for="(item, index) in sencondNavList" :key="index" class="item">
                <image
                    :src="item.icon"
                    mode="scaleToFill"
                />
                <view class="item-panel">
                    <text class="title">{{item.title}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// 获取屏幕边界到安全区域的距离,不同的机型距离顶部的高度不同
const { safeAreaInsets } = uni.getSystemInfoSync()

const safeAreaInsetTop = safeAreaInsets && safeAreaInsets.top + 95

// 定义一级导航
const firstNavList = reactive([
    {
        path: '/pagesInquiry/outpatient/index',
        icon: '/static/images/yisheng.png',
        title: '问医生',
        desc: '按科室查问医生'
    },
    {
        path: '/pagesInquiry/room/index',
        icon: '/static/images/wenzhen.png',
        title: '极速问诊',
        desc: '20s医生极速回复'
    },
    {
        path: '/pages/ws/socket_io',
        icon: '/static/images/menzhen.png',
        title: '开药门诊',
        desc: '线上买药更方便'
    }
])

// 定义二级导航
const sencondNavList = reactive([
    {
        path: '',
        icon: '/static/images/yaopin.png',
        title: '药品订单'
    },
    {
        path: '',
        icon: '/static/images/dangan.png',
        title: '健康档案'
    },
    {
        path: '',
        icon: '/static/images/chufang.png',
        title: '我的处方'
    },
    {
        path: '',
        icon: '/static/images/chaxun.png',
        title: '疾病查询'
    }
])

// ------------------- 跳转页面开始 -------------------
const goto = (url:any) => {
	if (url == '/') {
		uni.switchTab({ url: '/pages/index/index' })
		return false
	} 
    uni.navigateTo({url})
}
// ------------------- 跳转页面结束 -------------------
</script>

<style scoped lang="scss">
.nav-wrap {
    background-color: white;
    margin-top: 170rpx;
    padding-bottom: 30rpx;

    // 定义一级导航
    .top-box {
        display: flex;
        justify-content: space-evenly;
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
                width: 100rpx;
                height: 100rpx;
            }
            .item-panel {
                display: flex;
                flex-direction: column;
                align-items: center;

                padding-top: 10rpx;

                .title {
                    font-size: 26rpx;
                    font-weight: bold;
                }
                .desc {
                    padding-top: 10rpx;
                    font-size: 24rpx;
                    color: gray;
                }
            }
        }
    }

    // 定义二级导航
    .bottom-box {
        display: flex;
        justify-content: space-evenly;
        padding-top: 40rpx;
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
                width: 52rpx;
                height: 52rpx;
            }
            .item-panel {
                display: flex;
                flex-direction: column;
                align-items: center;

                padding-top: 10rpx;

                .title {
                    font-size: 28rpx;
                }
                .desc {
                    padding-top: 10rpx;
                    font-size: 24rpx;
                    color: gray;
                }
            }
        }
    }
}
</style>